<template>
  <transition name="move">
    <div class="food-wrapper fixed w100 zIndex15"
         ref="food"
         v-show="showFlag">
      <div class="food-content">
        <div class="image-header relative w100 f0">
          <img :src="food.image"
               alt=""
               class="absolute wh100"
               @load="_initScroll">
          <div class="back absolute">
            <i class="poi icon-arrow_lift f20 fw600"
               @click.stop.prevent="hide"></i>
          </div>
        </div>
        <div class="content relative f0">
          <h4 class="f14 fw700">{{food.name}}</h4>
          <div class="detail">
            <span class="SellCount f10">月售{{food.sellCount}}份</span><strong class="rating f10">好评率{{food.rating}}</strong>
          </div>
          <div class="price f0 fw700">
            <p class="newPrice inline-block"> <strong class="f12">¥</strong> <span class="f18">{{food.price}}</span></p>
            <p class="oldPrice inline-block fw700"
               v-show="food.oldPrice"><strong class="f12">¥</strong><span class="f14">{{food.oldPrice}}</span></p>
          </div>
          <div class="cartcontrol-wrapper absolute zIndex10">
            <control-cart :food="food"
                          @add="onAdd">
            </control-cart>
          </div>
          <transition name="fade">
            <div @click.stop="addFood"
                 class="addCartBtn absolute zIndex f12 fw500 zIndex15 t-c"
                 v-show="!food.count || food.count === 0">
              加入购物车
            </div>
          </transition>
        </div>
        <split v-show="food.info"></split>
        <div class="introduce">
          <h3 class="f14 fw700">商品介绍</h3>
          <p class="f12 fw400">{{food.info}}</p>
        </div>
        <split></split>
        <div class="ratings">
          <h2 class="name f14 fw700">商品评价</h2>
          <rating-select :ratings="food.ratings"
                         :select-type="selectType"
                         :only-content="onlyContent"
                         :desc="desc"
                         v-if="food.ratings"
                         @setType="setType"
                         @toggle="toggleOnly">

          </rating-select>
        </div>
        <div class="ratings-content-wrapper border-1px-top">
          <div class="ratings-content">
            <ul>
              <li class="rating-item border-1px-bottom"
                  v-for="(rating,ratingNum) in computedRatings"
                  :key="ratingNum">
                <div class="time-name f10 flex-def flex-cCenter flex-zBetween">
                  <span class="time">{{new Date(rating.rateTime) | formatDate('yyyy-MM-dd hh:mm:ss')}}</span>
                  <div class="user ">
                    <strong class="name">{{rating.username}}</strong>
                    <img :src="rating.avatar"
                         alt=""
                         width="12"
                         height="12"
                         class="radius">
                  </div>
                </div>
                <p class="text flex-def flex-cCenter">
                  <span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>
                  <strong class="text-text">{{rating.text}}</strong>
                </p>
              </li>
            </ul>
          </div>
          <transition appear
                      enter-active-class="animated fadeIn"
                      leave-active-class="animated fadeOut"
                      appear-active-class="animated fadeIn">
            <div class="no-ratings"
                 v-show="!computedRatings || !computedRatings.length">
              <img src="/images/no-bg.jpg"
                   alt=""
                   width="100%"
                   @load="_initScroll">
            </div>
          </transition>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import BScroll from 'better-scroll';
import { mixin } from 'mixin';
import { formatDate } from 'common/js/utils';
import ControlCart from 'components/ControlCart/ControlCart';
import Split from 'components/Split/Split';
import RatingSelect from 'components/RatingSelect/RatingSelect';

export default {
  'name': 'detail',
  'mixins': [mixin],
  'props': {
    'food': { 'type': Object }
  },
  data() {
    return {
      'showFlag': false,
      'desc': {
        'all': '全部',
        'positive': '满意',
        'negative': '不满意'
      }
    };
  },
  'components': { ControlCart, Split, RatingSelect },
  created() {
    // data数据已经初始化，但是DOM结构渲染完成，组件没有加载

  },
  mounted() {
    // DOM渲染完成，组件挂载完成
  },
  'computed': {
    rating() {
      return this.food.ratings;
    }
  },
  'methods': {
    show() {
      this.showFlag = true;
      this._initScroll();
    },
    hide() {
      this.showFlag = false;
    },
    _initScroll() {
      this.$nextTick(() => {
        if (!this.scroll) this.scroll = new BScroll(this.$refs.food, {
          'click': true
        });
        else this.scroll.refresh();
      });
    },
    addFood(event) {
      if (!event._constructed) return;
      if (!this.food.count) this.$set(this.food, 'count', 1);
      this.$emit('add', event.target);
    },
    onAdd(target) {
      this.$emit('add', target);
    },
    _setData(food) {
      this.selectFoods.forEach(item => {
        if (item.foodId === food.foodId) food.count = item.count;
      });
      this.food = food;
    }
  },
  'watch': {
    selectType(newData, oldData) {
      this._initScroll();
    },
    onlyContent(newData, oldData) {
      this._initScroll();
    }
  },
  'filters': {
    formatDate(data, format) {
      return formatDate(data, format);
    }
  }
};
</script>

<style lang='stylus' rel='stylesheet/stylus'>
@import '~common/stylus/mixin'
.food-wrapper
  top 0
  left 0
  bottom 48px
  overflow hidden
  background-color #fff
  transform translate3d(0, 0, 0)
  &.move-enter-active, &.move-leave-active
    transition all 0.2s linear
  &.move-enter, &.move-leave-active
    transform translate3d(100%, 0, 0)
  .image-header
    height 0
    padding-top 100%
    img
      top 0
      left 0
    .back
      top 15px
      left 5px
      i
        padding(10, 10, 10, 10)
        color rgba(255, 255, 255, 0.8)
  .content
    padding(18, 18, 18, 18)
    h4
      color rgb(7, 17, 27)
      line-height 14px
      margin-bottom 8px
    .detail
      color rgb(147, 153, 159)
      line-height 20px
      span
        margin-right 12px
    .price
      margin-top 18px
      p
        strong
          margin-right 1px
        &:last-child
          color rgb(147, 153, 159)
          margin-left 6px
          text-decoration line-through
          vertical-align bottom
      p:first-child
        color rgb(240, 20, 20)
    .cartcontrol-wrapper
      right 10px
      bottom 10px
    .addCartBtn
      right 15px
      bottom 18px
      height 24px
      line-height 24px
      color #fff
      background-color rgb(0, 160, 220)
      border-radius 12px
      opacity 1
      box-sizing border-box
      padding(0, 12, 0, 12)
      &.fade-enter-active, &.fade-leave-active
        transition all 0.4s
      &.fade-enter, &.fade-leave-active
        opacity 0
        z-index -1
  .introduce
    padding(18, 18, 18, 18)
    h3
      color rgb(7, 17, 27)
      margin-bottom 8px
    p
      line-height 24px
      padding(0, 8, 0, 8)
  .ratings
    padding(18, 0, 0, 0)
    .name
      color rgb(7, 17, 27)
      text-indent 18px
  .ratings-content-wrapper
    border-1px-top(rgba(7, 17, 27, 0.3))
    .ratings-content
      padding(10, 16, 10, 16)
      .rating-item
        padding-bottom 16px
        border-1px-bottom(rgba(7, 17, 27, 0.2))
        .time-name
          color rgb(147, 153, 159)
          height 35px
          .user
            .name
              margin-right 4px
        .text
          span
            margin-right 4px
            font-size 18px
            &.icon-thumb_down
              color rgb(147, 153, 159)
            &.icon-thumb_up
              color rgb(0, 160, 220)
          strong
            font-size 14px
            coor rgb(7, 17, 27)
</style>
